<html>
<head>
<title>
</title>
</head>

<style type="text/css">

body {
	background-image:url('http://static1.grsites.com/archive/textures/beige/beige114.jpg');
}

#createProfile {
	background-color:#ffcc66;
}

#createLabel {
	font:25px black trebuchet;
}

#create {
	width:28%;
	padding:30;
}

#memberAllowed {
	width:50%;
	padding:20;
	border-top:1px solid blue;
	border-bottom:1px solid blue;	
	border-left:1px solid blue;
	border-right:1px solid blue;
}
	
</style>


<script type="text/javascript">

var adminName = 'Administer: ' + 'Danni';//get name from the database;

</script>

<body>

<div id="create">
<fieldset id="createProfile">
<legend id="createLabel">&nbsp Create a New Group &nbsp </legend>

<FORM METHOD="POST" ACTION="yourCGIURL" ENCTYPE="multipart/form-data">

	<p><script type="text/javascript">document.write(adminName);</script></p>

	<p>Group Name: <input type="text" name="chatName"></p>
	
	<p>Upload Group Logo: <INPUT TYPE="text" NAME="fileToGo"></p>

	<p>Insert Member: <input type="text" id="allowPerson"><input type="button" value="Add Member" id="addButton"></p>

	<p><div id="memberAllowed"></div></p>
	
	<!-- alert messages need to go here if the user is invalid -->

	<p>
<input type="submit" id="submitButton" value="Create Group"> &nbsp <input type="button" id="clearButton" value="Clear Form"> &nbsp <a href="homeFinal2.html">Back</a>
</p>
</form>

<script type="text/javaScript">

var addbutton = document.getElementById('addButton');
addbutton.onclick = addMember;
var memberList = []
 
function addMember(event){
	var member = document.getElementById('allowPerson').value;
	memberList.push(member);
	//var inputbox = document.getElementById('allowPerson');
	document.getElementById('allowPerson').value = "";
	memberString = memberList.join(",");
	document.getElementById('memberAllowed').innerHTML = memberString;
}


</script>
</body>
</html>